<script lang="ts" setup>
//我的信息页
import { ref, inject, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus'; // 引入 ElMessage
import { useRoute, useRouter, RouterLink } from 'vue-router'
import type { UploadProps } from 'element-plus'
// 引入状态管理文件
import { useTokenStore } from '../stores/token'
import { FormInstance } from 'ant-design-vue';
import CryptoJS from 'crypto-js';
const axios = inject('axios') //注入 axios
// 创建路由对象，用于编程式导航
const router = useRouter()
// 创建 Token 状态管理 Store
const userStore = useTokenStore()

// 获取登录的 Token
const token = ref(userStore.getToken())
//解密token
function getToken() {
  const encryptedToken = localStorage.getItem('token');
  if (encryptedToken) {
    const secretKey = 'your_secret_key'; // 使用相同的密钥
    const bytes = CryptoJS.AES.decrypt(encryptedToken, secretKey);
    const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
    return decryptedToken;
  }
  return null;
}

//用户数据
const user = ref({})
//默认头像
const avatarUrl = ref('../img/avatar.png')
//表单校验
interface DataForm {
    uname: String,
    headlmg: String,
    user_synopsis: String,
    phone: String,
    email: String,
    account: String,
    rolename: String,
    // password:String,
    // confirmPassword:String
}
const ruleFormRef = ref<FormInstance>();    // 获取表单实例
// 表单数据
const dataForm = reactive<DataForm>({
    uname: '',
    headlmg: '',
    user_synopsis: '',
    phone: '',
    email: '',
    account: '',
    rolename: '',
    // password: '',
    // confirmPassword: ''
});
//校验规则
const rules = reactive<FormRules<DataForm>>({
    uname: [
        { required: false, message: '请输入笔名(用户名)', trigger: 'blur' },//required: 表示该字段是否为必填项；message: 如果验证失败时显示的提示信息；trigger: 触发验证的方式。这里设置为 'blur'，表示当输入框失去焦点时触发验证。
        { min: 2, max: 10, message: '笔名长度在 2 到 10 个字符', trigger: 'blur' }
    ],
    headlmg: [
        { required: false, message: '请上传头像', trigger: 'change' }
    ],
    user_synopsis: [
        { required: false, message: '请输入简介', trigger: 'blur' },
        { min: 2, max: 200, message: '简介长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    phone: [
        { required: false, message: '请输入手机号', trigger: 'blur' },
        {pattern:/^1\d{10}$/,message:'请输入正确的手机号码格式',trigger:'blur'},
    ],
    email: [
        { required: false, message: '请输入邮箱', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱' },
    ],
    account: [
        { required: false, message: '请输入账号', trigger: 'blur' },
        { min: 2, max: 10, message: '账号长度在 2 到 10 个字符', trigger: 'blur' }
    ]
})
// 重置按钮事件
// const resetForm = (formEl: FormInstance | undefined) => {
//     if (!formEl) return
//     formEl.resetFields()
// }

//获取用户信息
//获取用户信息
function initUser() {
    console.log('获取用户信息')
    //判断用户是否登录
      //判断用户是否登录
    const Token = getToken();
    console.log('Token:'+ Token)
    if (Token != '') {
        axios({
            method: 'get',
            url: 'http://localhost:8080/user/getuser',
            headers: {
                Authorization: 'Bearer ' + Token
            }
        })
            .then(function (response) {
                if (response.data.code == '200') {
                    user.value = response.data.user
                    console.log("用户信息获取成功：" + response.data.user.uname)
                    user.value = response.data.user
                    console.log("user.value:=====>"+user.value)
                    //初始化表单
                    dataForm.uname = user.value.uname
                    dataForm.phone = user.value.phone
                    dataForm.user_synopsis = user.value.user_synopsis
                    dataForm.email = user.value.email
                    dataForm.account = user.value.account
                    // 仅在用户上传新头像后更新 headlmg
                    if(user.value.headlmg){
                        dataForm.headlmg = user.value.headlmg; // 保留用户头像的值
                        avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL
                    }
                    console.log("user.headlmg:" + user.value.headlmg)
                    // avatarUrl.value = '/svr/api/image/display/head/' + user.value.avatar
                    //avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL 
                    console.log("user.avater:" + avatarUrl.value) 
                    console.log("user:" + user.value)
                }
            })
            .catch(function (error) {
                console.log(error)
                console.log("过期："+error.response.status)
                if (error.response.status == 401) {
                    console.log("过期2："+error.response.status)
                    token.value = ''
                    userStore.setToken('')
                    
                    //提示
                    ElMessage({
                        message: '请重新登录',
                        type: 'success',
                        plain: true
                    })
                    router.push('/login')
                }
            })
    }
}
// 上传头像成功的回调函数
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    // 设置新头像 URL
    avatarUrl.value = URL.createObjectURL(uploadFile.raw!)
    // 更新用户数据的头像名称；注意upFile应与后端的#保存文件到上传目录的返回键名称一致,否则无法获取文件名
    console.log("response.upFile；"+response.upFile)
    dataForm.headlmg = response.upFile
}
// 上传头像前的回调函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    // 获取上传头像的后缀
    const fileSuffix = rawFile.name.substring(rawFile.name.lastIndexOf('.') + 1).toLowerCase()
    //允许上传的头像扩展名的集合
    const whiteList = ['png', 'gif', 'jpg', 'webp', 'jpeg']
    // 判断头像是否允许上传
    if (whiteList.indexOf(fileSuffix) === -1) {
        ElMessage.error('头像只能是：png, gif, jpg, webp, jpeg 格式')
        return false
    }
    // 判断头像大小是否符合要求
    if (rawFile.size / 1024 / 1024 > 4) {
        ElMessage.error('头像大小不能超过 4MB!')
        return false
    }
    return true
}

//修改用户信息
function editUser() {
    //解密token
    const Token = getToken();
    console.log("dataForm:" + dataForm)
    axios({
        method: 'post',
        url: 'http://localhost:8080/user/updateuser',
        data: dataForm,
        headers: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + Token
        }
    })
        .then(function (response) {
            console.log(response)
            if (response.data.code == '200') {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                    plain: true
                })
            }
        })
        .catch(function (error) {
            console.log(error)
            if (error.response.status == 401) {
                token.value = ''
                userStore.setToken('')
                //提示
                ElMessage({
                    message: '请重新登录',
                    type: 'success',
                    plain: true
                })
                router.push('/login')
            }
        })
}
// 提交修改
const submitForm = async (formEl: FormInstance | undefined) => {
    console.log('提交修改!')
    console.log("!formEl:" + !formEl)
    if (!formEl) return;

    await formEl.validate((valid, fields) => {
        console.log('valid:', valid);
        if (valid) {
            // 数据校验通过，执行修改用户信息
            console.log("修改用户信息!");
            console.log("dataForm:", dataForm);
            editUser();
        } else {
            // 数据校验未通过，提示用户检查填写的信息
            ElMessage({
                message: '请检查填写的信息是否正确！',
                type: 'warning',
                plain: true
            });
            console.log('error submit!', fields);
        }
    });
}


// 自动调整 textarea 高度
const resizeTextarea = (event) => {
    const textarea = event.target;
    const lineHeight = parseInt(getComputedStyle(textarea).lineHeight); // 获取行高

    textarea.style.height = 'auto'; // 先清空高度

    // 计算当前内容的行数
    const lineCount = Math.floor(textarea.scrollHeight / lineHeight);

    // 设置最大行数为5行
    const maxLines = 6;

    // 计算高度
    if (lineCount <= maxLines) {
        textarea.style.height = `${textarea.scrollHeight}px`;
    } else {
        // 如果超过5行，则设定固定高度（例如，最大5行的高度）
        textarea.style.height = `${maxLines * lineHeight}px`;
        textarea.style.overflowY = 'auto'; // 超出内容则添加滚动条
    }
};



// const updateInfo = () => {
//     // 提交更新的信息，这里可以添加 API 调用逻辑
//     alert('信息已更新！');
// };

// 更新信息
// const updateInfo = () => {
//     // 提交更新的信息，这里可以添加 API 调用逻辑
//     ElMessage({
//         message: '信息已更新！',
//         type: 'success',
//     });
// };
// 完成初始渲染并创建 DOM 节点后，进行页面加载
onMounted(() => {
    //初始化数据
    initUser()
})
</script>
<template>
    <div class="mystaging">
        <!--个人信息 -->
        <div class="mydata">
            <!-- <div class="mydata-title">我的信息</div>
            <hr style="width: 1100px; border: none; border-top: 1px solid #ccc;"> -->
            <div class="mydata-content">
                <img :src="avatarUrl" alt="头像" class="avatar">
                <h2 class="username">{{user.uname}}</h2>
                <span class="real-name">{{ user.realnameState}}</span>
                <span class="tags">{{ user.rolename }}</span>
            </div>

        </div>
        <div class="mydata-contents">
            <!-- <h2 style="width: 200px;margin-top: 1px; margin-left: 20px;">小说作家个人信息</h2> -->
            <div class="btn"><el-button type="primary" @click="submitForm(ruleFormRef)" >修改信息 </el-button></div>
            <!-- <el-form-item>
                
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item> -->
            <div class="info">
                <el-form label-width="auto" style="max-width: 600px" :model="dataForm" :rules="rules" status-icon ref="ruleFormRef">
                    <div class="info-item">
                        <label>头像:</label>
                        <el-upload class="avatar-uploader" name="file" action="http://localhost:8080/api/upload"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="avatarUrl" :src="avatarUrl" style="width: 150px; height: 150px" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                        <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none;" />
                    </div>
                    <!-- <div class="info-item">
                        <label for="uname">笔名(用户名):</label>
                        <input type="text" id="uname" v-model="uname" />
                    </div> -->
                    <el-form-item label="笔名(用户名):" prop="uname">
                        <el-input v-model="dataForm.uname" />
                    </el-form-item>
                    <!-- <div class="info-item">
                        <label>账号:</label>
                        <span>{{ account }}</span> 
                    </div> -->
                    <el-form-item label="账号" prop="account">
                        <el-input v-model="dataForm.account" readonly />
                    </el-form-item>
                    <!-- <div class="info-item">
                        <label for="phone">手机号:</label>
                        <input type="text" id="phone" v-model="phone" />
                    </div> -->
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="dataForm.phone" />
                    </el-form-item>
                    <!-- <div class="info-item">
                        <label for="email">邮箱:</label>
                        <input type="email" id="email" v-model="email" />
                    </div> -->
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="dataForm.email" />
                    </el-form-item>
                    <div class="info-item1">
                        <label for="user_synopsis">简介:</label>
                        <textarea id="bio" v-model="dataForm.user_synopsis" @input="resizeTextarea"></textarea>
                    </div>
                    <!-- <el-form-item label="邮箱" prop="email">
                        <el-input v-model="dataForm.email" />
                    </el-form-item> -->
                </el-form>
            </div>
        </div>
    </div>
</template>

<style scoped>
.mystaging {
    width: 90%;
}

.mydata {
    display: flex;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100px;
    margin-left: 7%;
    align-items: flex-end;
    padding-bottom: 5px;
    /* background-color: aqua; */
    /* background-image: url(../img/77.png); */
    background-size: 100% 100%;
    /*底部添加边框 */
    border-bottom: 1px solid #ccc;

}

.mydata-title {
    font-size: 24px;
    /* 或其他合适的大小 */
}

.mydata-content {
    display: flex;
    /* 使用 flex 布局 */
    align-items: center;
    /* 垂直居中对齐 */

}

.avatar {
    height: 60px;
    width: 60px;
    margin-left: 20px;
}

.username {
    margin-left: 20px;
    /* 提供图像与文本之间的间距 */
    /* 也可以自定义其他样式，例如字体大小、颜色等 */
}

.real-name {
    margin-left: 20px;
}

.tags {
    display: inline-flex;
    /** 使用 Flexbox 布局  */
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* height: 30px;
    width: 80px; */
    /* 粗体 */
    font-weight: bold;
    color: rgb(25, 25, 248);
    padding: 5px;
    font-size: 10px;
    margin-left: 5px;
    background-color: rgba(107, 170, 226, 0.877);
    border-radius: 10px;

}

.mydata-contents {
    width: 100%;
    margin-left: 7%;
    height: 550px;
    margin-top: 20px;
    padding-top: 1px;
    /* background-image: url(../img/bookbg001.jpg); */
    background-color: #FFFFFF;
    background-size: 100% 115%;
}

.btn {
    height: 30px;
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    background-color: #e8d7c3;
}

.info {
    width: 30%;
    margin-left: 20%;
}

.information_box {
    width: 600%;
    background-color: aqua;
}
.avatar-uploader{
    /* background-color: aqua; */
    /* 子元素居右显示 */
    display: flex;
    justify-content: flex-end;
}

.info-item {
    width: 250px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.info-item1 {
    width: 150%;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 13px;
}

.info-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    /* 加粗标签文字 */
}

/* 美化输入框 */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    /* 使输入框和文本域充分宽 */
    padding: 10px;
    /* 内边距增加可阅读性 */
    border: none;
    /* 去掉边框 */
    border-radius: 5px;
    /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 添加阴影 */
    background-color: #ebe9e6;
    /* 输入框背景颜色 */
    transition: background-color 0.3s;
    /* 背景颜色变化的过渡效果 */
}

/* 输入框获取焦点时的效果 */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    background-color: #ebe1d5;
    /* 聚焦时背景变为颜色 */
    outline: none;
    /* 去掉焦点时的轮廓 */
    box-shadow: 0 0 6px rgba(230, 221, 146, 0.8);
    /* 添加聚焦阴影 */
}

.avatar-preview {
    margin-top: 10px;
    width: 50px;
    /* 设置头像预览的大小 */
    height: 50px;
    border-radius: 50%;
    /* 圆形头像 */
}
</style>